<route lang="json5" type="page">
{
  layout: 'main',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '咨询记录',
  },
}
</route>

<template>
  <view
    class="mt-2 card-shadow"
    v-for="(item, index) in workList"
    :key="index"
    @click="handleItem(index)"
  >
    <view class="sticky top-20 z-10 px-1">
      <ConsultSteps
        :activeStep="item.flowId"
        :consultationTime="item.startTime + ' - ' + item.endTime"
      />
    </view>
  </view>
  <view>
    <wd-popup v-model="show" position="bottom" custom-style="height: 200px;" @close="handleClose">
      <h3 class="text-center mt-4">咨询结束时间</h3>
      <view style="margin-top: -16rpx">
        <wd-datetime-picker-view type="time" v-model="endTime" label="时分" columns-height="160" />
      </view>
      <view class="pb-6 mr-2 ml-2 mt-4">
        <wd-button block type="error" @click="handleEnd">确认结束</wd-button>
      </view>
    </wd-popup>
  </view>
</template>

<script lang="ts" setup>
import { getWorkList, sendEndTime } from '@/api/work'
import { useUserStore } from '@/store'
import cache from '@/utils/cache'
import { parseISO, format } from 'date-fns'

interface WorkItem {
  id: string
  flowId: number
  startTime: string
  endTime: string
}

const userStore = useUserStore()
const workList = ref<WorkItem[]>([])
const show = ref(false)
const endTime = ref<string>('')

const getWorks = () => {
  getWorkList({ openid: userStore.userInfo.openid }).then((res) => {
    console.log(res)
    workList.value = res.data as any[]
    workList.value.forEach((item) => {
      item.flowId = item.flowId - 1

      item.startTime = format(parseISO(item.startTime), 'yyyy-MM-dd HH:mm')
      item.endTime = format(parseISO(item.endTime), 'HH:mm')
    })
  })
}

onShow(() => {
  getWorks()
})

const handleClose = () => {
  show.value = false
}

const roleId = userStore.userInfo.roleId
const handleItem = (index: number) => {
  const item = workList.value[index]
  console.log(item)
  cache.set('workItem', item)

  switch (item.flowId) {
    case 1:
      confirm(item)
      break
    case 2:
      if (roleId === 4) {
        uni.navigateTo({
          url: '/pages/consult/feedback',
        })
      } else if (roleId <= 3) {
        uni.navigateTo({
          url: '/pages/consult/addDetails',
        })
      }

      break
  }
}

const confirm = (item: WorkItem) => {
  show.value = true
}

const handleEnd = () => {
  console.log(endTime)
  const singleItem = cache.get('workItem') as WorkItem
  const fullEndTime = createDateTime(endTime.value)
  sendEndTime({ id: singleItem.id, endTime: fullEndTime }).then(() => {
    getWorks()
    show.value = false
    cache.remove('workItem')
  })
}

const createDateTime = (time: string): Date => {
  // 获取当前日期
  const currentDate = new Date()

  // 提取小时和分钟
  const [hours, minutes] = time.split(':').map(Number)
  // 创建新的 Date 对象，并设置小时和分钟
  const dateTime = new Date(
    currentDate.getFullYear(),
    currentDate.getMonth(),
    currentDate.getDate(),
    hours,
    minutes,
  )

  return dateTime
}
</script>

<style lang="scss" scoped>
.card-shadow {
  border-radius: 32rpx;
  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
  transition: box-shadow 0.3s ease-in-out;
}

.card-shadow:hover {
  box-shadow: 0 6px 12px rgb(0 0 0 / 15%);
}
</style>
